<template>
  <div class="mod-config">
    <el-card class="box-card search-input" shadow="never">
      <el-form  label-width="120px"  size="mini" :model="dataForm" @keyup.enter.native="findPage()">
        <el-row>
          <el-col :span="6">
            <el-form-item label="商家名称：" prop="shopName">
              <el-input v-model="dataForm.shopName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="截图日期：">
              <el-date-picker
                @change="createTimeChange"
                style="width: 100%"
                v-model="createTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="['00:00:00', '23:59:59']"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="主播账号：" prop="account">
              <el-input v-model="dataForm.account"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="违规类型：" prop="againstType">
              <el-select v-model="dataForm.againstType">
                <el-option
                  v-for="item in againstTypeOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="违规编号：" prop="againstNumber">
              <el-input v-model="dataForm.againstNumber"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="审核状态：" prop="status">
              <el-select v-model="dataForm.status" style="width: 100%">
                <el-option
                  v-for="item in StatusOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" style="text-align: center;">
            <el-form-item label-width="0px">
              <el-button  type="primary" @click="$refs.CyTable.query(dataForm)">查询</el-button>
              <el-button @click="reset()">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <cy-table
      url="/api/v1/broadcast/liveSuperviseInfo"
      :showSelection="false"
      :showBatchDelete="false"
      :max-height="500"
      :highlightCurrentRow="true"
      :operationWidth="100"
      :totalSize="totalSize"
      :columns="filterColumns"
      :showCustomOperation="true"
      :showEditOperation="false"
      :showDeleteOperation="false"
      customLabel="查看"
      @findPage="findPage"
      @handleCustom="handleDetail"
      ref="CyTable"
    >
    </cy-table>
    <el-dialog
      width="80%"
      title="监管详情"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible">
      <el-row>
        <el-form  label-width="120px" ref="" size="mini" :model="detailData">
          <el-col :span="24">
            <el-form-item label="直播标题：" prop="title">
              <div>{{detailData.title}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商家名称：" prop="shopName">
              <div>{{detailData.shopName}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="主播账号：" prop="account">
              <div>{{detailData.account}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="截图时间：" prop="createTime">
              <div>{{detailData.createTime}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="违规类型：" prop="againstType">
              <div>{{detailData.againstType}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="违规编号：" prop="againstNumber">
              <div>{{detailData.againstNumber}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="截图封面：">
              <img :src="detailData.pic" style="width: 80px;height: 80px;"/>
            </el-form-item>
          </el-col>
          <el-col :span="10" offset="8">

            <el-button v-if="detailData.status=='0'" size="mini" type="primary" @click="editCustom('1')">直播间下架</el-button>
            <el-button v-if="detailData.status=='0'" size="mini" type="primary"  @click="editCustom('3')">受理</el-button>
            <el-button v-if="detailData.status!='0'" size="mini" type="info" disabled>已受理</el-button>
          </el-col>
        </el-form>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
  import CyTable from "./component/CyTable";
  import CySelect from "./component/CySelect";
  export default {
    components: {
      CyTable,
      CySelect
    },
    data() {
      return {
        loading: false,
        moreBtnDisable: true,
        detailData : {
          status:"",
        },
        dataForm: {
        },
        StatusOption: [{
          label: '全部'
        },{
          value: 1,
          label: '直播间下架'
        }, {
          value: 2,
          label: '禁播'
        },{
          value: 3,
          label: '已受理'
        }],
        againstTypeOption : [{
          value: '0',
          label: '正常'
        }, {
          value: '1',
          label: '色情'
        }, {
          value: '2',
          label: '性感'
        },{
          value: '3',
          label: '涉政'
        },{
          value: '4',
          label: '违法'
        },{
          value: '5',
          label: '涉恐'
        },{
          value: '6',
          label: '其他'
        }],
        columns: [],
        filterColumns: [],
        pageRequest: { pageNum: 1, pageSize: 10 },
        totalSize: 0,
        operation: false, // true:新增, false:编辑
        dialogVisible: false, // 新增编辑界面是否显示
        editLoading: false,
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        createTime: [],
        dataListLoading: false,
        rules : {
        },
      }
    },
    mounted: function () {
      this.columns = [
        { prop: "id", label: "序号", minWidth: 120 },
        { prop: "pic", label: "截图封面", minWidth: 120,showType:'image',imgSize:{width:60,height:60} },
        { prop: "shopName", label: "商家名称", minWidth: 120},
        { prop: "title", label: "直播标题", minWidth: 120},
        { prop: "account", label: "主播账号", minWidth: 120},
        { prop: "createTime", label: "截图时间", minWidth: 120},
        { prop: "againstType", label: "违规类型", minWidth: 120 ,formatter: this.againstTypeVal},
        { prop: "againstNumber", label: "违规编号", minWidth: 120},
        { prop: "status", label: "审核状态", minWidth: 120,formatter: this.statusVal},
      ];
      let temp = [];
      this.columns.forEach(function(key, val) {
        temp.push(key);
      });
      this.filterColumns = temp;
    },
    methods: {
// 创建日期改变
      createTimeChange: function (val) {
        if (val) {
          this.dataForm.startCreateTime = val[0]
          this.dataForm.endCreateTime = val[1]
        } else {
          this.dataForm.startCreateTime = ''
          this.dataForm.endCreateTime = ''
        }
      },
      statusVal(row, column, cellValue, index) {
        //状态 状态:0 "",1-直播间下架,2-主播禁播 3- 已受理
        if (cellValue == 3) {
          return "已受理";
        }else if (cellValue == 1) {
          return "直播间下架";
        }else if (cellValue == 2) {
          return "主播禁播";
        }
        return "";
      },
      againstTypeVal(row, column, cellValue, index) {
        if (cellValue == '0') {
          return "正常";
        }else if (cellValue == '1') {
          return "色情";
        }else if (cellValue == '2') {
          return "性感";
        }else if (cellValue == '3') {
          return "涉政";
        }else if (cellValue == '4') {
          return "违法";
        }else if (cellValue == '5') {
          return "涉恐";
        }
        return "其他";
      },
      // 获取数据列表
      findPage() {
        this.$refs.CyTable.findPage(this.dataForm)
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.findPage()
      },
      //重置
      reset() {
        this.dataForm={};
        this.createTime = []
        this.$refs.CyTable.resetForm(this.dataForm);
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.findPage()
      },
      // 详情
      handleDetail: function (params) {
        let id = params.row.id;
        let param = {"id": id};
        this.utils.request.liveRequest({
          url: '/api/v1/broadcast/liveSuperviseInfo/'+id,
          method: 'get',
          params: param
        }).then(result => {
          this.detailData = result.data.data;
          this.$forceUpdate();
        })
        this.dialogVisible = true;
      },
      editCustom:function(type){
        let status = type;
        let statusVal="您确认受理吗？";
        if(status==1){
          statusVal="您确认直播下架吗？";
        }
        let this_=this;
        let params={"id":this_.detailData.id,"status":status,"liveNumber":this_.detailData.liveNumber}
        this.$confirm(statusVal, "提示", {}).then(() => {
          let id = this_.detailData.id;
          this.utils.request.liveRequest({
            url: '/api/v1/broadcast/liveSuperviseInfo/'+id,
            method: 'post',
            params: params
          }).then(result => {
            let data = result.data;
            if (data.code === '0') {
              this_.$refs.CyTable.findPage(this_.dataForm)
              this_.$forceUpdate();
              this.dialogVisible=false;
              this_.detailData.status=status;
            }
          })
        });
      },
    }
  }
</script>
<style scoped lang="scss">

</style>
